<template>
  <div>
      <div class="xuanze">
        <span @click="fun('Jingxuan')">精选</span>
        <span @click="fun('Jiachang')">家常菜</span>
        <span @click="fun('Jiqiao')">小技巧</span>
    </div>
    <keep-alive>
        <component :is="com"></component>
    </keep-alive>
  </div>
</template>

<script>
import Jingxuan from "@/components/chishenme/xuanze/jingxuan.vue"
import Jiachang from "@/components/chishenme/xuanze/jiachang.vue"
import Jiqiao from "@/components/chishenme/xuanze/jiqiao.vue"
export default {
    data(){
        return{
            com:"Jingxuan"
        }
    },
    methods:{
        fun(data){
            this.com=data
        }
    },
    components:{
        Jiqiao,
        Jiachang,
        Jingxuan
    },
}
</script>

<style scoped>
.xuanze{
    height: .4rem;
    line-height: .4rem;
}
.xuanze span{
    display: inline-block;
    width: 25%;
    text-align: center;
    
}
</style>